$blue        : #3F90FA;
$purple      : #5821ae;
$bc          : #e4e4e4;
$fc          :#fff;
$common-left : 0.2rem;
$common-right: 0.6rem;


// 元素长宽
@mixin wh($width, $height) {
  width : $width;
  height: $height;
}

// 字体颜色,大小, 水平布局
@mixin font($size, $color: #333, $text-align: left) {
  font-size : $size;
  color     : $color;
  text-align: $text-align;
}

// flex布局
@mixin flex($justify-content: center, $align-items: center) {
  display        : flex;
  justify-content: $justify-content;
  align-items    : $align-items;
}

// 默认按照父元素的剧中
@mixin positionCenter($position: absolute) {
  position : $position;
  top      : 50%;
  left     : 50%;
  transform: translate3d(-50%, -50%, 0);
}


// 默认按照父元素的剧中
@mixin positionHCenter($position: absolute) {
  position : $position;
  top      : 50%;
  transform: translate3d(0, -50%, 0);
}

@mixin positionLeft($position: absolute, $left: $common-left) {
  position : $position;
  top      : 50%;
  left     : $left;
  transform: translate3d(0, -50%, 0);
}

@mixin positionRight($position: absolute, $right: $common-right) {
  position : $position;
  top      : 50%;
  right    : $right;
  transform: translate3d(0, -50%, 0);
}

// 边框阴影
@mixin bs($a:1px, $b:1px, $c:10px, $d:2px, $color:rgba(0, 0, 0, 0.3)) {
  box-shadow: $a $b $c $d $color;
}


// 渐变背景
@mixin bg($c1: rgba(44, 155, 218, 0.9), $c2:rgba(100, 192, 245, 0.8), $deg: 160deg, ) {
  background-image: linear-gradient($deg, $c1 20%, $c2 80%);
}

// 按钮
@mixin btn() {
  @include flex();
  width           : 100%;
  height          : 5rem;
  background-color: #1ca1ff;
  cursor          : pointer;
}

// 按钮
@mixin wbtn() {
  width : 9rem;
  height: 1.8rem;
  @include flex();
  border-radius   : 1rem;
  background-image: #fff;
  border          : 1px solid $blue;
}

@mixin line() {
  width        : 100%;
  overflow     : hidden;
  white-space  : nowrap;
  text-overflow: ellipsis;
}